<script setup>
import {onMounted, ref, watch} from "vue"
import {httpPost} from "@/utils/http";
import {ElMessage} from "element-plus";
import {setUserToken} from "@/store/session";
import {validateEmail, validateMobile} from "@/utils/validate";
import {Checked, Close, Iphone, Lock, Message} from "@element-plus/icons-vue";
import SendMsg from "@/components/SendMsg.vue";
import {arrayContains} from "@/utils/libs";
import {getSystemInfo} from "@/store/cache";
import ResetPass from "@/components/ResetPass.vue";
import {useRouter} from "vue-router";
import {useSharedStore} from "@/store/sharedata";

// 是否显示弹框属性，外部调用传入
const props = defineProps({
  show: Boolean,
})

const showDialog = ref(false)
// 监听 props.show 发生变化， props.show 通过父组件调用传入
watch(() => props.show, (newVal) => {
  showDialog.value = newVal
})

// 是否显示登录框true表示显示，false表示显示注册框
const login = ref(true)
const data = ref({
  username: import.meta.env.VITE_VUE_APP_USER, // 用户名
  password: import.meta.env.VITE_VUE_APP_PASS, // 密码
  mobile: '', // 手机号
  email: '', // 邮箱
  repass: '', // 重复密码
  code: '', // 验证码
  invite_code: '' // 邀请码
})

// mobile、email、username 注册方式是否开启
const enableMobile = ref(false)
const enableEmail = ref(false)
const enableUser = ref(false)
// 是否开启注册
const enableRegister = ref(true)
// 注册类型：mobile、email、username
const activeName = ref('')
// 微信图片，如果没有开启注册就显示微信图片，让用户添加微信
const wxImg = ref('/images/wx.png')
// hide 隐藏弹框，success 成功回调
const emits = defineEmits(['hide', 'success'])
// 控制重置密码组件显示
const showResetPass = ref(false)
const router = useRouter()
const store = useSharedStore()


onMounted(() => {
  getSystemInfo().then(res => {
    if (res.data) {
      // 获取注册方式
      const registerWays = res.data['register_ways']
      // 判断用户名注册是否开启
      if (arrayContains(registerWays, 'username')) {
        enableUser.value = true
        activeName.value = 'username'
      }
      // 判断邮箱注册是否开启
      if (arrayContains(registerWays, 'email')) {
        enableEmail.value = true
        activeName.value = 'email'
      }
      // 判断手机号注册是否开启
      if (arrayContains(registerWays, 'mobile')) {
        enableMobile.value = true
        activeName.value = 'mobile'
      }
      // 是否开启注册
      enableRegister.value = res.data['enabled_register']
      // 使用后台上传的客服微信二维码
      if (res.data['wechat_card_url'] !== '') {
        wxImg.value = res.data['wechat_card_url']
      }
    }
  })
})

// 点击登录回调
const submitLogin = () => {
  if (data.value.username === '') {
    return ElMessage.error('请输入用户名');
  }
  if (data.value.password === '') {
    return ElMessage.error('请输入密码');
  }
  doLogin()
}

// 登录请求调用
const doLogin = () => {
  httpPost('api/user/login', data.value).then(res => {
    setUserToken(res.data.token)
    store.setIsLogin(true)
    ElMessage.success("登录成功！")
    emits("hide")
    emits('success')
  }).catch(e => {
    ElMessage.error('登录失败：' + e.message)
  })
}

// 点击注册回调方法
const submitRegister = () => {
  if (activeName.value === 'username' && data.value.username === '') {
    return ElMessage.error('请输入用户名')
  }

  if (activeName.value === 'mobile' && !validateMobile(data.value.mobile)) {
    return ElMessage.error('请输入合法的手机号')
  }

  if (activeName.value === 'email' && !validateEmail(data.value.email)) {
    return ElMessage.error('请输入合法的邮箱地址')
  }

  if (data.value.password.length < 8) {
    return ElMessage.error('密码的长度为8-16个字符')
  }

  if (data.value.password !== data.value.repass) {
    return ElMessage.error('两次输入密码不一致')
  }

  if ((activeName.value === 'mobile' || activeName.value === 'email') && data.value.code === '') {
    return ElMessage.error('请输入验证码');
  }
  doRegister()
}

// 注册请求调用
const doRegister = () => {
  // 设置注册类型
  data.value.reg_way = activeName.value
  httpPost('api/user/register', data.value).then(res => {
    setUserToken(res.data.token)
    store.setIsLogin(true)
    ElMessage.success({
      message: '注册成功！',
      // 弹框关闭的回调方法
      onClose: () => {
        emits('hide')
        emits('success')
      },
      duration: 500
    })
  }).catch(e => {
    ElMessage.error('注册失败：' + e.message)
  })
}


</script>

<template>
  <div class="login-dialog w-full">
    <!-- 登录表单 -->
    <div class="login-box" v-if="login">
      <el-form :model="data" class="form">
        <div class="block">
          <el-input placeholder="账号" size="large" v-model="data.username" autocomplete="off">
            <template #prefix>
              <el-icon>
                <Iphone/>
              </el-icon>
            </template>
          </el-input>
        </div>
        <div class="block">
          <el-input placeholder="请输入密码(8-16位)" maxlength="16" size="large" v-model="data.password"
                    show-password autocomplete="off">
            <template #prefix>
              <el-icon>
                <Lock/>
              </el-icon>
            </template>
          </el-input>
        </div>
        <el-row class="btn-row" :gutter="20">
          <el-col :span="24">
            <el-button class="login-btn" type="primary" size="large" @click="submitLogin">登 录</el-button>
          </el-col>
        </el-row>
        <div class="w-full">
          <div class="text flex justify-center items-center pt-3 text-sm">
            还没有账号？
            <el-button size="small" @click="login = false">注册</el-button>
            <el-button type="info" class="forget" size="small" @click="showResetPass = true">忘记密码？</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <!-- 注册表单 -->
    <div class="register-box w-full" v-else>
      <el-form :model="data" class="form" v-if="enableRegister">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="手机注册" name="mobile" v-if="enableMobile">
            <div class="block">
              <el-input placeholder="手机号码" size="large" v-model="data.mobile" maxlength="11" autocomplete="off">
                <template #prefix>
                  <el-icon>
                    <Iphone/>
                  </el-icon>
                </template>
              </el-input>
            </div>
            <div class="block">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-input placeholder="验证码" size="large" maxlength="30" v-model="data.code" autocomplete="off">
                    <template #prefix>
                      <el-icon>
                        <Checked/>
                      </el-icon>
                    </template>
                  </el-input>
                </el-col>
                <el-col :span="12">
                  <send-msg size="large" :receiver="data.mobile" type="mobile"/>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="邮箱注册" name="email" v-if="enableEmail">
            <div class="block">
              <el-input placeholder="邮箱地址" size="large" v-model="data.email" autocomplete="off">
                <template #prefix>
                  <el-icon>
                    <Message/>
                  </el-icon>
                </template>
              </el-input>
            </div>
            <div class="block">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-input placeholder="验证码" size="large" maxlength="30" v-model="data.code" autocomplete="off">
                    <template #prefix>
                      <el-icon>
                        <Checked/>
                      </el-icon>
                    </template>
                  </el-input>
                </el-col>
                <el-col :span="12">
                  <send-msg size="large" :receiver="data.email" type="email"/>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="用户名注册" name="username" v-if="enableUser">
            <div class="block">
              <el-input placeholder="用户名" size="large" v-model="data.username" autocomplete="off">
                <template #prefix>
                  <el-icon>
                    <Iphone/>
                  </el-icon>
                </template>
              </el-input>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="block">
          <el-input placeholder="请输入密码(8-16位)" maxlength="16" size="large" v-model="data.password" show-password
                    autocomplete="off">
            <template #prefix>
              <el-icon>
                <Lock/>
              </el-icon>
            </template>
          </el-input>
        </div>

        <div class="block">
          <el-input placeholder="重复密码(8-16位)" maxlength="16" size="large" v-model="data.repass" show-password
                    autocomplete="off">
            <template #prefix>
              <el-icon>
                <Lock/>
              </el-icon>
            </template>
          </el-input>
        </div>

        <div class="block">
          <el-input placeholder="邀请码(可选)" size="large" v-model="data.invite_code" autocomplete="off">
            <template #prefix>
              <el-icon>
                <Message/>
              </el-icon>
            </template>
          </el-input>
        </div>

        <div class="w-full">
          <el-button class="login-btn w-full" type="primary" size="large" @click="submitRegister">注 册</el-button>
        </div>
        <div class="text text-sm flex justify-center items-center w-full pt-3">
          已有账号？
          <el-button size="small" @click="login = true">登录</el-button>
        </div>
      </el-form>
      <div class="tip-result" v-else>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-result icon="error" title="注册功能已关闭">
              <template #sub-title>
                <p>抱歉，系统已关闭注册功能，请联系管理员添加账号！</p>
              </template>
            </el-result>
          </el-col>
          <el-col :span="12">
            <div class="wechat-card">
              <el-image :src="wxImg"/>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 重置密码弹框 -->
    <reset-pass @hide="showResetPass = false" :show="showResetPass"/>
  </div>
</template>

<style lang="stylus">
.login-dialog {
  border-radius 10px

  .el-tabs__nav {
    display flex
    width 100%
    justify-content space-between
  }

  .form {
    .block {
      margin-bottom 10px
    }

    .btn-row {
      display flex

      .login-btn {
        font-size 16px
        width 100%
      }

      .text {
        line-height 40px

        .el-tag {
          cursor pointer
        }
      }

      .forget {
        margin-left 10px
      }
    }

    .c-login {
      display flex

      .text {
        font-size 16px
        color #a1a1a1
        display: flex;
        align-items: center;
      }

      .login-type {
        display flex
        justify-content center

        .iconfont {
          font-size 18px
          background: #E9F1F6;
          padding: 8px;
          border-radius: 50%;
        }

        .iconfont.icon-wechat {
          color #0bc15f
        }
      }
    }
    .text {
      color var(--el-text-color-primary)
    }
  }

  .register-box {
    .wechat-card {
      text-align center
    }
  }

}
</style>